<script setup>
import { Delete, Edit } from '@element-plus/icons-vue';
import { ref } from 'vue';

const data=[{
  "index":"1",
  "imgs":"check3",
  "number1":"工序1",
  
}]
let dialogFormVisibles=ref(false)
const add=()=>{
  dialogFormVisibles.value=true
}
</script>
<template>
  <el-row style="background-color: white;margin: 40px 10px 0px;border:mintcream;">
    <el-col :span="24">
      <!-- 表单功能栏 -->
      <el-row class="row1">
        <!-- 本地包裹码 -->
       
            <el-col :span="21">
              检查项列表
            </el-col> 
            <el-col :span="3">
              <el-button style="margin:0px 50px 20px 0px ;" @click="add">
                添加检查项
              </el-button>
            </el-col>
      </el-row>
      <el-row class="row2">
        <el-col :span="3">
          <el-button :icon="RefreshRight" size="middle" style="margin:0px 0px 5px 20px">
            刷新
          </el-button>
        </el-col>
        <el-col :span="21" class="col2">
          <el-row>
            <el-col :span="22">
              <el-input style="margin:0px 0px 0px -6px ;" v-model="input" class="input" placeholder="请输入检查项名称"
                clearable />
            </el-col>
            <el-col :span="2">
              <el-button type="success" style="margin:0px 0px 0px -6px ;">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表单主体 -->
      <el-row class="row3" style="width: 96%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-table :data="data" stripe border style="width:100%">
            <el-table-column label="序号" align="center" prop="index" :index="indexMethod" width="300px" />
            <el-table-column label="名称" align="center" prop="imgs" width="300px">
            </el-table-column>
            <el-table-column label="所属工序" align="center" prop="number1" width="300px" />
            <el-table-column label="编辑" align="center">
              <template #default="scope">
                <el-button type="primary" @click="" size="small" :icon="Edit">编辑</el-button>
                <el-button type="primary" @click="" size="small" :icon="Delete">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <!-- 添加检查项子页面 -->
  <el-dialog v-model="dialogFormVisibles" title="添加检查项">
    <el-row>
      检查项信息
    </el-row>
    <el-row>
      <el-col :span="12" align="center">
        检查项名称
      </el-col>
    
      <el-col :span="10">
        <el-input clearable></el-input>
      </el-col>
      <el-col :span="2">
        <el-button align="center">
          确定
        </el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<style scoped>

</style>